<template>
  <div class="list-left" v-if="async">
    <ul class="list-left_ul list-left_borbot">
      <li class="list-left_li" v-for="(item,index) in viewModel" :key="index">
        <div class="list-left_head" @click="tabChang(item)" v-if="item.children.length!=0">
          <div class="list-left_title">{{item.label}}</div>
          <div class="icon-original" :class="{'icon-rolot':item.check==true}">
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="list-left_head" @click="skipTba(item)" v-else>
          <div class="list-left_title">{{item.label}}</div>
        </div>
        <ul class="list-left_ul list-left_pal" v-if="item.children.length!=0&&item.check">
          <li class="list-left_li" v-for="(sItem,sIndex) in item.children" :key="sIndex">
            <div class="list-left_head" @click="tabChang(sItem)" v-if="sItem.children.length!=0">
              <div class="list-left_title">{{sItem.label}}</div>
              <div class="icon-original" :class="{'icon-rolot':sItem.check==true}">
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
            <div class="list-left_head" @click="skipTba(sItem)" v-else>
              <div class="list-left_title">{{sItem.label}}</div>
            </div>
            <ul class="list-left_ul list-left_pal" v-if="sItem.children.length!=0&&sItem.check">
              <li class="list-left_li" v-for="(tItem,tIndex) in sItem.children" :key="tIndex">
                <div class="list-left_head" @click="tabChang(tItem)">
                  <div class="list-left_title">{{tItem.label}}</div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>
<script>
  import ala from 'ala'
  export default {
    data () {
      return {
        viewModel: [],
        async: false
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        var repones = await ala.diyHttpGet('Api/RelationTree/GetTree?type=TutorialClassRelation')
        this.viewModel = this.gridForm(repones)
        this.async = true
      },
      tabChang (val) {
        this.$set(val, 'check', !val.check)
      },
      skipTba (skVal) {
        this.$emit('leftChang', skVal.value)
      },
      gridForm (gItem) {
        var this_ = this
        gItem.forEach(element => {
          this.$set(element, 'check', false)
          if (element.children !== null) {
            this_.gridForm(element.children)
          } else {
            element.children = []
          }
        })
        return gItem
      }
    }
  }
</script>
<style lang="scss">
  @import "./widget.scss";
</style>